<template>
  <div class="promotion_tab_control">
    <ul class="tab_control_box">
      <li 
        class="game_android" 
        @click="changeClick(0)" 
        :class="[currentIndex === 0? 'game_android_active': '']">
        <div>
          <img src="../../../assets/img/datail/ic_game_android_dark.png" alt="" v-if="currentIndex === 0">
          <img src="../../../assets/img/datail/ic_game_android_light.png" alt="" v-else>
        </div>
        <span>安卓端下载</span>
      </li>
      <li 
        class="game_ios" 
        @click="changeClick(1)"
        :class="[currentIndex === 1? 'game_ios_active': '']">
        <div>
          <img src="../../../assets/img/datail/ic_game_ios_dark.png" alt="" v-if="currentIndex === 1">
          <img src="../../../assets/img/datail/ic_game_ios_light.png" alt="" v-else>
        </div>
        <span>苹果端下载</span>
      </li>
    </ul>
    <div v-show="currentIndex === 1" class="explain_text">
      <p>苹果端请将地址复制到"safari浏览器"(系统自带)下载</p>
      <p class="explain_problem" @click="openClick">关于"未授权信任的企业开发级证书"问题</p>
    </div>
    <van-popup v-model="show" round>
      <div class="popup_content">
        <div class="popup_title">关于IOS信任问题</div>
        <p class="title_top">由于ios9以上系统限制，安装游戏成功后，首次打开会提示"未授权信任的企业开发者"。为正常使用，请按如下流程操作：</p>
        <p><span style="color: #dd861d;">步骤:</span>打开设置→通用→设备管理→企业级应用(Xxx Xxx Technology Development Co.LTD)进行信任操作。</p>
        <div class="btn_click" @click="show = false">我知道了</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    props: {
      appName: {
        type: String,
        default: null
      },
    },
    data() {
      return {
        currentIndex: 0,
        show: false,
      }
    },
    methods: {
      changeClick(id) {
        this.currentIndex = id
        this.$emit('change-index', id)
      },
      openClick() {
        this.show = true
      }
    },
  }
</script>

<style scoped>
.promotion_tab_control {
  width: 680px;
  /* height: 100px; */
  margin-bottom: 50px;
}

.tab_control_box {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.game_android,
.game_ios {
  box-sizing: border-box;
  display: flex;
  height: 100px;
  align-items: center;
  font-size: 26px;
  color: #666;
  border-bottom: 6px solid transparent;
}

.game_android_active,
.game_ios_active {
  border-bottom: 6px solid #2d40f6;
  color: #333;
  font-weight: 450;
}

.game_android img,
.game_ios img {
  margin-right: 10px;
}

.explain_text {
  font-size: 24px;
  color: #29209a;
  padding-top: 30px;
}

.explain_text p {
  position: relative;
  line-height: 52px;
  text-indent: 40px;
  font-weight: 450;
}

.explain_text p::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: url('../../../assets/img/datail/ic_icon_wen.png') no-repeat;
  background-size: 100%;
}

.explain_problem {
  text-decoration: underline;
}

.popup_content {
  background: #fff;
  width: 570px;
  height: 560px;
}

.popup_title {
  line-height: 132px;
  color: #333;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

.popup_content p {
  padding: 0 35px;
  font-size: 24px;
  line-height: 40px;
  color: #333;
}

.title_top {
  text-indent: 60px;
  margin-bottom: 40px;
}

.btn_click {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 570px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-top: 1px solid #ededed;
  font-size: 24px;
  color: #8f8f8f;
  font-weight: 450;
}
</style>